<!-- 模板 -->
<template>
  <div class="root">
    <el-card class="box-card">
      <div slot="header" class="clearfix" style="padding: 10px">
        <span class="card-tag">{{ cardTag }}</span>
        <el-button
          style="padding: 3px 0; font-size: 36px"
          type="text"
          class="delete"
          >×</el-button
        >
      </div>
      <div class="todos">
        <el-form
          :model="todoForm"
          ref="todoForm"
          label-width="100px"
          class="demo-todo"
        >
          <el-form-item
            prop="shot"
            label="shot:"
            :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
          >
            <el-input v-model="shotInfo"></el-input>
          </el-form-item>
          <el-form-item
            prop="signal"
            label="Signal:"
            :rules="[{ required: true, message: '请选择', trigger: 'blur' }]"
          >
            <el-select v-model="signalInfo">
              <el-option
                v-for="item in signalOptions"
                :key="item.value + 1"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label-width="auto">
            <el-button
              type="primary"
              @click="getInfo('todoForm')"
              style="width: 80px; font-size: 16px"
              >Get</el-button
            >

            <el-button
              style="width: 80px; font-size: 16px"
              @click="resetIorm('todoForm')"
              >Reset</el-button
            >
          </el-form-item>
        </el-form>
      </div>

      <div class="chartbox">
        <div class="chart-box"></div>
        <div class="footer">
          <el-button
            type="primary"
            style="width: 90px; font-size: 18px"
            @click="goBackTo"
            >Ok</el-button
          >

          <el-button style="width: 90px; font-size: 18px">Cancel</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
// import request from '../utils/request.js'
import * as echarts from "echarts";
export default {
  data() {
    return {
      cardTag: "Add query waveform",
      shotInfo: "B67622",
      signalInfo: "WUNB",
      signalOptions: [
        {
          value: 1,
          label: "ABCD",
        },
        {
          value: 2,
          label: "ABCD",
        },
        {
          value: 3,
          label: "ABCD",
        },
      ],
      chart: {
        option: {
          tooltip: {
            trigger: "axis",
            position: function (pt) {
              return [pt[0], "10%"];
            },
          },
          title: {
            left: "center",
            text: "SHOT",
          },
          toolbox: {
            feature: {
              dataZoom: {
                yAxisIndex: "none",
              },
              restore: {},
              saveAsImage: {},
            },
          },
          xAxis: {
            type: "time",
            boundaryGap: false,
          },
          yAxis: {
            type: "value",
            boundaryGap: [0, "100%"],
          },
          dataZoom: [
            {
              type: "inside",
              start: 10,
              end: 90,
            },
            {
              start: 10,
              end: 90,
            },
          ],
          series: [
            {
              type: "line",
              smooth: "true",
              symbol: "none",
              areaStyle: {},
              data: null,
            },
          ],
        },
      },
      todoForm: {},
      myChart: null,
    };
  },
  props: [],
  components: {},
  computed: {},
  filters: {},
  methods: {
    goBackTo() {
      this.$router.push("/direct");
    },
    chartDom() {
      this.$nextTick(() => {
        if (this.myChart) {
          // 销毁对象
          this.myChart.dispose();
        }
        let base = +new Date(2018, 9, 3);
        let oneDay = 24 * 3600;
        let data = [[base, Math.random() * 3]];
        for (let i = 1; i < 100; i++) {
          let now = new Date((base += oneDay));
          let newD = Math.round((Math.random() - 0.5) * 2 + data[i - 1][1]);
          data.push([+now, newD]);
        }

        let dom = document.querySelector(".chart-box");
        if (!dom) return;
        console.log(dom, "----");
        this.myChart = echarts.init(dom);
        this.chart.option.series[0].data = data;
        this.myChart.setOption(this.chart.option, true);
        this.myChart.on("dataZoom", (e) => {
          console.log(e);
          // let truncStart = Math.trunc(e.batch[0].startValue);
          // let truncEnd = Math.trunc(e.batch[0].endValue); //需要后端 来配置 前台拿到的数值太随机 无法准确判断
        });
      });
    },
  },
  created() {},
  mounted() {
    this.chartDom();
    window.addEventListener("resize", this.chartDom, false);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.chartDom, false);
  },
};
</script>

<style lang="less" scoped>
.root {
  width: 100%;
  height: calc(100vh - 120px);
  position: relative;
  .box-card {
    /deep/ .el-card__header {
      padding: 0 20px;
    }

    .clearfix {
      color: #b1b1b1;
      display: flex;
      justify-content: space-between;
      .card-tag {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .delete {
        color: #b1b1b1;
      }
    }
  }
  .todos {
    width: 94%;
    margin: 0 auto;
    border-bottom: 1px solid #eee;
    // background-color: antiquewhite;
    .demo-todo {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 20px 0;

      .el-button.el-button {
        margin-left: 20px;
      }
      /deep/ .el-form-item {
        margin: 0 !important;
      }
    }
  }
  .chartbox {
    width: 100%;
    padding: 25px;
    .chart-box {
      width: 100%;
      height: 500px;
    }
    .footer {
      display: flex;
      justify-content: flex-end;
      padding: 20px 0 0;
    }
  }
}
</style>
